<template>
  <div>
    <Modal
      v-model="modals"
      width="1000"
      scrollable
      closable
      :title="titleFrom"
      :mask-closable="false"
      :z-index="1"
      @on-cancel="handleReset"
	  @on-confirm="handleSubmit"
      @on-visible-change="visible"
    >
      <Form ref="formValidate" :model="formValidate" :label-width="110" :rules="ruleValidate" @submit.native.prevent>
        <Row type="flex" :gutter="24">
          	<div class="input_top">
          		  <div class="left">
          			<!-- <Input v-model="formValidate.no" placeholder="姓名/手机号码/病历号"></Input> -->
					<Select filterable="true" v-model="formValidate.uid" placeholder="请选择患者" element-id="uid" clearable @click.native="handleChange">
						<Option v-for="(item, j) in users" :value="item.id" :key="j">{{ item.name }}</Option>
					</Select>
				  </div>
          		  <div class="right">
					 <img class="avatar" src="../../../../../assets/images/f.png"></img>
          			 <span class="name">{{showUserInfo.name}}/{{showUserInfo.sex}}/{{showUserInfo.age}}</span>
					 <span class="sec">手机：{{showUserInfo.phone}}</span>
					 <span class="sec">病历号：{{showUserInfo.no}}</span>
					 <span class="sec">出生日期：{{showUserInfo.birthday}}</span>
          		  </div>
          	</div>
        </Row><!--row end-->
		<Row type="flex" :gutter="24">
		  	<div class="list">
		  		<div class="bar">
		  			<Button type="warning"  icon="md-add" class="button" @click="addArchive()">添加</Button>
		  		</div>
		  		<div class="header">
		  			<span class="name">名称</span>
		  			<span class="remark">备注</span>
		  			<span class="price">价格</span>
		  			<span class="num">数量</span>
		  			<span class="total">合计</span>
		  			<span class="option">操作</span>
		  		</div>
		  		<div class="items" style="overflow-y: auto;">
		  			<div class="item" v-for="n in datas">
						<span class="name">{{n.name}}</span>
						<span class="remark">
							<input v-model="n.remark" class="num_input"/>
						</span>
						<span class="price">
							<input @change="changeValue" v-model="n.price" type="number" class="price_input"/>
						</span>
						<span class="num">
							<input @change="changeValue" class="num_input" type="number" v-model="n.num"/>
						</span>
						<span class="total">{{(n.price*n.num).toFixed(2)}}</span>
						<div class="option"><a  class="del" @click="removeSelItem(n)">删除</a></div>
					</div>
		  		</div>
		  	</div>
		</Row><!--row end-->
      </Form><!--form end-->
	  <div slot="footer" class="footer">
		  <div class="reg_info"><span class="title">费用：</span><span class="text">{{amount.toFixed(2)}}元</span></div>
		  <div>
			<Button @click="cancel()">取消</Button>
			<Button type="primary" @click="handleSubmit()">提交订单</Button>
		  </div>
	  </div>
    </Modal>
  </div>
</template>

<script>
import { ListSearchApi,GetApi} from '@/api/archives';
import { saveApi} from '@/api/usersale';

import icon from '@/utils/icon';
import { getCookies } from '@/libs/util';

export default {
  name: 'menusFrom',
  props: { 
    formValidate: {
      type: Object,
      default: null,
    },
    titleFrom: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      arrs: [],
      searchRule: '',
      iconVal: '',
      grid: {
        xl: 12,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      modals: false,
      modal12: false,
      ruleValidate: {
		uid: [{ required: true, message: '请选择用户', trigger: 'blur' }],
		item_id: [{ required: true, message: '请选择就诊事项', trigger: 'blur' }],
		time_id: [{ required: true, message: '请选择预约编号', trigger: 'blur' }],
      },
      // types: [],
      // status: [],
      // citys: [],
      // companys: [],
      users: [],
	  amount:0.00,
      valids: false,
      list: icon,
      authType: true,
      search: icon,
	  header: {},
      fileUrl: '/adminapi/file/upload_file/1',
	  files:[],
	  sche_date:'',
	  showUserInfo:{
		  name:'-',
		  sex:'-',
		  age:'-',
		  no:'-',
		  date:'-',
		  phone:'-',
		  rec:'-',
		  birthday:'-',
		  source:'-'
	  },
	  datas:[]
    };
  },
  watch: {
    'formValidate.header': function (n) {
      this.formValidate.is_header = n ? 1 : 0;
    },
    'formValidate.auth_type': function (n) {
      if (n === undefined) {
        n = 1;
      }
      this.authType = n === 1;
    },
	'formValidate.uid': function (n) {
		console.info(n)
		if(n){
			this.getUserInfo(n);
		}
	},
	
  },
  computed: {
	  
  },
  methods: {
    init() {
      this.searchRule = '';
      this.arrs = [];
    },
	handleChange(){
		console.log('Selected value changed to:');
	},
	searchUsers(){
		let that = this;
		ListSearchApi({})
		.then(async (res) => {
			that.users = res.data;
			
		})
		.catch((res) => {
		  this.$Message.error(res.msg);
		});
	},
	// 上传头部token
	getToken() {
	  this.header['Authori-zation'] = 'Bearer ' + getCookies('token');
	  console.info(this.header);
	},
    handleCreate1(val) {
      this.headerOptionsList.push({
        value: val,
        label: val,
      });
    },
    // 获取客户数据
    getAddFrom() {
		
		
		this.searchUsers();
		
    },
	resetData(datas){
		console.info(datas)
		this.datas = datas;
		this.recalAmount();
	},
	
	cancel(){
		this.modals = false;
	},
    // 提交
    handleSubmit() {
		console.info(this.datas);
	
	 if (!this.formValidate.uid) return this.$Message.error('请选择患者用户');
	 if (this.datas.length == 0) return this.$Message.error('请选择产品或服务');
	 this.recalAmount();
	 this.formValidate.items = this.datas;
	 this.formValidate.total = this.amount;
     saveApi(this.formValidate).then(async (res) => {
         this.$Message.success(res.msg);
         this.modals = false;
         this.$emit('getList');
         this.getAddFrom();
       })
       .catch((res) => {
         this.$Message.error(res.msg);
      });
    },
    handleReset() {
      this.modals = false;
      this.authType = true;
      this.$refs['formValidate'].resetFields();
      this.$emit('clearFrom');
    },
	addArchive(){
		console.info(333)
		this.$emit('showArchiveModal');
	},
	getUserInfo(id){
		
		GetApi(id).then(async (res) => {
			console.info(res)
			if(res.data){
				this.showUserInfo.name = res.data.name;
				this.showUserInfo.age = res.data.age + '岁';
				this.showUserInfo.sex = res.data.sex == 0?"男":"女";
				this.showUserInfo.no = res.data.no;
				this.showUserInfo.created_time = res.data.arc_date;
				this.showUserInfo.phone = res.data.phone;
				this.showUserInfo.birthday = res.data.birthday;
			}
		}).catch((res) => {
		    this.$Message.error(res.msg);
		});
	},
	changeValue(){
		this.recalAmount();
		this.$forceUpdate(); 
	},
	recalAmount(){
		let that = this;
		that.amount = 0;
		this.datas.forEach(function(n){
			console.info(n)
			that.amount += n.price*n.num;
		});
		console.info(that.amount)
	},
	removeSelItem(row){
		console.info(111)
		const filteredArray = this.datas.map((item) => {
		  if (item.id !== row.id) {
		    return item;
		  }
		}).filter(item => item !== undefined);
		this.datas = filteredArray;
		this.recalAmount();
		this.$emit('receiveModalData',filteredArray);
		console.info(333)
		console.info(filteredArray)
	}
  },
  created() {
    this.list = this.search;
    this.getToken();
    this.getAddFrom();
  },
};
</script>

<style scoped>
.trees-coadd {
  width: 100%;
  height: 500px;
  border-radius: 4px;
  overflow: hidden;
}
.scollhide {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin-left: 18px;
  padding: 10px 0 10px 0;
  box-sizing: border-box;
}
.content {
  font-size: 12px;
}

.time {
  font-size: 12px;
  color: #2d8cf0;
}

.icons-item {
  float: left;
  margin: 6px 6px 6px 0;
  width: 53px;
  text-align: center;
  list-style: none;
  cursor: pointer;
  height: 50px;
  color: #5c6b77;
  transition: all 0.2s ease;
  position: relative;
  padding-top: 10px;
}
.icons-item .ivu-icon {
  font-size: 16px;
}
.search-rule {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f2f2f2;
}
.rule {
  display: flex;
  flex-wrap: wrap;
  max-height: 700px;
  overflow: scroll;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.rule::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
.rule::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
.rule::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #555;
}
.rule-list {
  background-color: #f2f2f2;
  width: 32%;
  margin: 5px;
  border-radius: 3px;
  padding: 10px;
  color: #333;
  cursor: pointer;
  transition: all 0.1s;
}
.rule-list:hover {
  background-color: #c5d1dd;
}
.rule-list div {
  white-space: nowrap;
}
.select-rule {
  background-color: #c5d1dd;
}
.add {
  display: flex;
  align-items: center;
}
.df {
  display: flex;
  justify-content: center;
}

.file{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.file:hover{
	background-color: #edf7fe;
}
.close-bg{
	display: inline-block;
	width: 35px;
	height: 35px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-right: 15px;;
}

.close-bg:hover{
	cursor: pointer;
}

.close {
	display: inline-block;
	width: 15px;
	height: 2px;
	background: red;
	transform: rotate(45deg);
}

.close::after {
	content: '';
	display: block;
	width: 15px;
	height: 2px;
	background: red;
	transform: rotate(-90deg);
}

.input_top{
	display: flex;
	flex-direction: row;
	padding: 0px 12px 20px 12px;
	align-items: center;
	flex: 1;
}

.input_top .left{
	display: flex;
	flex-direction: row;
	width:350px;
}
.input_top .left .button{
	width: 100px;
	margin-left: 15px;
	background-color: white;
	border: 1px solid #2d8cf0;
	color:#2d8cf0;
	font-weight: bold;
	font-size: 14px;
}

.input_top .right{
	display: flex;
	flex-direction: row;
	margin-left: 30px;
	align-items: center;
	flex:1;
}
.input_top .right .avatar{
	width:30px;
	height:30px;
	border-radius: 15px;
	background-color: white;
}
.input_top .right .name{
	font-weight: bold;
	font-size: 14px;
	color: black;
	margin-left: 10px;
}
.input_top .right .sec{
	font-size: 12px;
	margin-left: 10px;
	color: black;
}

.footer{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.footer .reg_info{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.footer .reg_info .title{
	font-size: 14px;
}
.footer .reg_info .text{
	font-size: 14px;
	font-weight: bold;
	color: #2d8cf0;
}
.right_info{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.right_info .keshi{
	border: 1px solid #dfdfdf;
	width: 33%;
	height: 318px;
	overflow-y: auto;
}
.right_info .keshi .item{
	font-size: 14px;
	padding: 5px 10px;
	border-bottom: 1px solid #dfdfdf;
	cursor: pointer;
}
.right_info .keshi .selected{
	color: white;
	background-color: #2d8cf0;
}
.right_info .doctor{
	border: 1px solid #dfdfdf;
	width: 33%;
	height: 318px;
	overflow-y: auto;
}
.right_info .doctor .item{
	font-size: 14px;
	padding: 5px 10px;
	border-bottom: 1px solid #dfdfdf;
	cursor: pointer;
}
.right_info .doctor .selected{
	color: white;
	background-color: #2d8cf0;
}

.right_info .date{
	border: 1px solid #dfdfdf;
	width: 33%;
	height: 318px;
	overflow-y: auto;
}
.right_info .date .header{
	display:flex;
	flex-direction: row;
	border-bottom: 1px solid #dfdfdf;
}
.right_info .date .header .item{
	font-size: 14px;
	padding: 5px 10px;
	cursor: pointer;
}

.right_info .date .header .selected{
	border-bottom: 2px solid #2d8cf0;
	font-weight: bold;
}

.right_info .date .time{
	display: flex;
	flex-direction: column;
}
.right_info .date .time .subitem{
	font-size: 14px;
	padding: 3px 10px;
	border-bottom: 1px solid #dfdfdf;
	cursor: pointer;
	color: black;
}

.right_info .date .time .selected{
	color: white;
	background-color: #2d8cf0;
}

.list{
	flex: 1;
	/* background-color: orange; */
	height: 300px;
	display: flex;
	flex-direction: column;
	padding: 0px 12px 20px 12px;
}
.list .bar{
	display: flex;
	flex-direction: row;
	/* background-color: #dfdfdf; */
	/* height: 50px; */
	align-items: center;
}
.list .bar .add{
	width: 70px;
	heigh:35px;
	text-align: center;
	margin-left: 15px;
}
.list .header{
	margin-top: 15px;
	display: flex;
	flex-direction: row;
	background-color: #fafafa;
	height: 35px;
	align-items: center;
}
.list .header .name{
	width: 30%;
	text-align: center;
	height: 35px;
	line-height: 35px;
}
.list .header .remark{
	width: 20%;
	text-align: center;
	height: 35px;
	line-height: 35px;
}
.list .header .price{
	width: 10%;
	text-align: center;
	height: 35px;
	line-height: 35px;
}
.list .header .num{
	width: 10%;
	text-align: center;
	height: 35px;
	line-height: 35px;
}
.list .header .total{
	width: 15%;
	text-align: center;
	height: 35px;
	line-height: 35px;
}
.list .header .option{
	width: 15%;
	text-align: center;
	height: 35px;
	line-height: 35px;
}

.list .items{
	display: flex;
	flex-direction: column;
	/* overflow-y: auto; */
}
.list .items .item{
	display: flex;
	flex-direction: row;
	height: 45px!important;
	align-items: center;
	justify-content: center;
}
.list .items .item .name{
	width: 30%;
	text-align: center;
	height: 45px!important;
	line-height: 35px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.list .items .item .remark{
	width: 20%;
	text-align: center;
	height: 45px!important;
	line-height: 35px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.list .items .item .remark .num_input{
	width: 80%;
	height: 30px;
	border:1px solid #f1f1f1;
	text-align: center;
}
.list .items .item .price{
	width: 10%;
	text-align: center;
	height: 45px!important;
	line-height: 35px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.list .items .item .price .price_input{
	width: 80%;
	height: 30px;
	border:1px solid #f1f1f1;
	text-align: center;
}

.list .items .item .num{
	width: 10%;
	text-align: center;
	height: 45px!important;
	line-height: 35px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.list .items .item .num .num_input{
	width: 80%;
	height: 30px;
	border:1px solid #f1f1f1;
	text-align: center;
}
.list .items .item .total{
	width: 15%;
	text-align: center;
	height: 45px!important;
	line-height: 35px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.list .items .item .option{
	width: 15%;
	text-align: center;
	height: 45px!important;
	line-height: 35px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.list .items .item .edit{
	
}
.list .items .item .edit:hover{
	font-weight: bold;
	color: orange;
}
.list .items .item .del{
	margin-left: 15px;
}
.list .items .item .del:hover{
	font-weight: bold;
	color: orange;
}
</style>
